<template>
    <div class="categray">
        <div>
            <router-link tag="span" class="category-header wrap" to="./product-list?from=category">
                <van-search
                        style="width: 100%"
                        placeholder="请输入搜索关键词"/>
            </router-link>
            <br>
            <nav-bar></nav-bar>
            <div class="search-wrap" ref="searchWrap">
                <van-tree-select
                        :items="categoryData"
                        :active-id.sync="activeId"
                        :main-active-index.sync="activeIndex"
                >
                    <template #content>
                        <template v-for="index in categoryData.length">
                            <template v-if="activeIndex + 1 == index ">
                                <van-grid :column-num="3" :border="false">
                                    <van-grid-item
                                            v-for="item in categoryData[activeIndex].children"
                                            :key="item.id"
                                            :icon="item.icon"
                                            :text=item.text
                                            @click="selectProduct(item)"
                                    ></van-grid-item>
                                </van-grid>
                            </template>
                        </template>
                    </template>
                </van-tree-select>
            </div>

        </div>
    </div>
</template>

<script>
    import navBar from '../../components/NavBar'
    import listScroll from '../../components/ListScroll'
    import {treeList} from "../../api/category";

    export default {
        components: {
            navBar,
            listScroll
        },
        name: "category",
        data() {
            return {
                categoryData: [],
                currentIndex: 15,
                activeId: 1,
                activeIndex: 0,
            }
        },
        async mounted() {
            // this.setWrapHeight()
            // const { data } = await getCategory()
            this.categoryData = [];
        },
        methods: {
            getList() {
                treeList().then(res => {
                    var data = res.data
                    var arr = [];
                    data.map(item => {
                        arr.push({
                            text: item.name,
                            id: item.id,
                            children: []
                        })
                    })
                    for (var i = 0; i < data.length; i++) {
                        var dataItem = data[i].children;
                        for (var j = 0; j < dataItem.length; j++) {
                            arr[i].children.push({
                                text: dataItem[j].name,
                                id: dataItem[j].id,
                                icon: dataItem[j].icon
                            })
                        }
                    }
                    this.categoryData = arr;
                })
            },
            goHome() {
                this.$router.push({path: 'home'})
            },
            setWrapHeight() {
                // 设置视口高度
                let $screenHeight = document.documentElement.clientHeight
                this.$refs.searchWrap.style.height = $screenHeight - 100 + 'px'
            },
            selectMenu(index) {
                this.currentIndex = index
            },
            selectProduct(item) {
                this.$router.push({path: `product-list?categoryId=${item.id}&name=${item.text}`})
            },
        },
        created() {
            this.getList();
        }
    }
</script>

<style lang="less">
    @import '../../common/style/mixin';

    .categray {
        .category-header {
            background: #fff;
            position: fixed;
            left: 0;
            top: 0;
            .fj();
            .wh(100%, 50px);
            line-height: 50px;
            padding: 0 15px;
            box-sizing: border-box;
            font-size: 5rem;
            color: #656771;
            /*z-index: 10000;*/

            &.active {
                background: @primary;
            }

            .icon-left {
                font-size: 5rem;
                font-weight: bold;
            }

        }
    }

    .search-wrap {
        width: 100%;
        margin-top: 50px;
        background: #F8F8F8;
        border-top: 1px solid #999;
        height: 90%;
    }

    .van-tree-select__nav {
        height: 600px;
    }

    .van-tree-select__content {
        /*justify-content:center;*/
        /*display: flex;*/
        /*position: relative;*/
        height: 600px;
    }

    //宫格图片大小
    .van-icon__image {
        width: 60px;
        height: 60px;
    }
</style>
